///
///Author: YYF
///Date: 2020-12-19 12:34:03
///Description:
///

import 'package:flutter/material.dart';
import 'package:lh_shop_flutter/r.g.dart';

class MePage extends StatefulWidget {
  @override
  _MePageState createState() => _MePageState();
}

class _MePageState extends State<MePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    List<String> topImgs = [
      R.image.icon_mine_wait_pay().assetName,
      R.image.icon_mine_deliver_goods().assetName,
      R.image.icon_mine_take_goods().assetName,
      R.image.icon_mine_evaluate().assetName,
      R.image.icon_mine_all_order().assetName,
    ];
    List<String> topTitle = ['代付款', '代发货', '待收货', '待评价', '全部订单'];
    List<String> centerTitle = ['功能设置', '联系客服', '分享邀请'];
    List<String> bottomImgs = [
      R.image.icon_mine_wait_pay().assetName,
      R.image.icon_mine_deliver_goods().assetName,
      R.image.icon_mine_take_goods().assetName,
      R.image.icon_mine_evaluate().assetName,
      R.image.icon_mine_all_order().assetName,
      R.image.icon_mine_evaluate().assetName,
      R.image.icon_mine_all_order().assetName,
    ];
    List<String> bottomTitle = [
      '抢购记录',
      '去充值',
      '兑换记录',
      '优惠券',
      '我的小店',
      '我的地址',
      '银行卡'
    ];
    return Scaffold(
      backgroundColor: Colors.white,
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            _topHeaderWidget(context, topImgs, topTitle),
            _centerMenuWidget(context, centerTitle, topImgs),
            _bottomMenuWidget(context, bottomTitle, bottomImgs),
          ],
        ),
      ),
    );
  }

  /// 我的抢购
  Widget _bottomMenuWidget(
      BuildContext context, List<String> bottomTitle, List<String> bottomImgs) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(left: 15),
            child: Text(
              '我的抢购',
              style: TextStyle(color: Colors.black, fontSize: 16),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 200,
            child: GridView.builder(
                itemCount: bottomTitle.length,
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    mainAxisSpacing: 10.0,
                    crossAxisSpacing: 10.0,
                    childAspectRatio: 1.2),
                itemBuilder: (BuildContext context, int index) {
                  //Widget Function(BuildContext context, int index)
                  return _menuItemWidget(
                    context,
                    bottomImgs,
                    index,
                    bottomTitle,
                  );
                }),
          )
        ],
      ),
    );
  }

  /// 我的服务
  Widget _centerMenuWidget(
      BuildContext context, List<String> centerTitle, List<String> topImgs) {
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(left: 15),
            child: Text(
              '我的服务',
              style: TextStyle(color: Colors.black, fontSize: 16),
            ),
          ),
          Container(
            width: MediaQuery.of(context).size.width,
            height: 100,
            child: GridView.builder(
                itemCount: centerTitle.length,
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    mainAxisSpacing: 10.0,
                    crossAxisSpacing: 10.0,
                    childAspectRatio: 1.2),
                itemBuilder: (BuildContext context, int index) {
                  //Widget Function(BuildContext context, int index)
                  return _menuItemWidget(context, topImgs, index, centerTitle);
                }),
          )
        ],
      ),
    );
  }

  /// 顶部header
  Widget _topHeaderWidget(
      BuildContext context, List<String> topImgs, List<String> topTitle) {
    return Container(
      height: 194 + 61 + 19.0,
      width: MediaQuery.of(context).size.width,
      // color: Colors.red,
      child: Stack(
        children: [
          Image.asset(
            R.image.icon_mine_topBg().assetName,
            width: MediaQuery.of(context).size.width,
            height: 194 + 19.0,
            fit: BoxFit.fill,
            alignment: Alignment.topCenter,
          ),
          Positioned(
              top: 35 + MediaQuery.of(context).padding.top,
              left: 15,
              right: 15,
              bottom: 0,
              child: Column(
                children: [
                  Row(
                    children: [
                      Container(
                        margin: EdgeInsets.only(left: 20),
                        child: Image.asset(
                          R.image.icon_demo_userIcon().assetName,
                          width: 61,
                          height: 61,
                        ),
                      ),
                      Container(
                        width: MediaQuery.of(context).size.width - 122,
                        margin: EdgeInsets.only(left: 10),
                        alignment: Alignment.centerLeft,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Text(
                                  '一直会闹的猫',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 16),
                                ),
                                Container(
                                  height: 20,
                                  margin: EdgeInsets.only(left: 16.5),
                                  padding: EdgeInsets.symmetric(
                                      vertical: 0, horizontal: 7.5),
                                  decoration: BoxDecoration(
                                      borderRadius: BorderRadius.circular(10),
                                      border: Border.all(
                                          color: Color(0xFF999999),
                                          width: 0.5)),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '积分：88',
                                    style: TextStyle(
                                        color: Color(0xFF999999), fontSize: 12),
                                  ),
                                )
                              ],
                            ),
                            SizedBox(height: 10),
                            Row(
                              // mainAxisSize: MainAxisSize.max,
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Row(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.baseline,
                                  children: [
                                    Text(
                                      '抢购余额：',
                                      style: TextStyle(
                                          color: Color(0xFF999999),
                                          fontSize: 12),
                                    ),
                                    Text(
                                      '￥',
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 12),
                                    ),
                                    Text(
                                      '5.09',
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 17),
                                    ),
                                  ],
                                ),
                                Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    Text(
                                      '去提现',
                                      style: TextStyle(
                                          color: Color(0xFFBEBEBE),
                                          fontSize: 14),
                                    ),
                                    Image.asset(
                                      R.image.icon_tixian_right().assetName,
                                      width: 12,
                                      height: 12,
                                    )
                                  ],
                                ),
                              ],
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                  Container(
                    width: MediaQuery.of(context).size.width,
                    height: 91.5,
                    margin: EdgeInsets.only(top: 19),
                    decoration: BoxDecoration(
                        color: Colors.white,
                        borderRadius: BorderRadius.circular(5),
                        boxShadow: [
                          BoxShadow(
                              color: Color(0xFFDEDEDE)
                                  .withAlpha((255 * 0.36).toInt()),
                              offset: Offset(0, 4),
                              blurRadius: 4)
                        ]),
                    child: ListView.builder(
                        padding: EdgeInsets.zero,
                        itemCount: 5,
                        scrollDirection: Axis.horizontal,
                        physics: NeverScrollableScrollPhysics(),
                        itemBuilder: (context, index) {
                          return _menuItemWidget(
                              context, topImgs, index, topTitle,
                              showBradge: true);
                        }),
                  )
                ],
              ))
        ],
      ),
    );
  }

  /// menuItem
  Container _menuItemWidget(BuildContext context, List<String> topImgs,
      int index, List<String> topTitle,
      {bool showBradge = false}) {
    return Container(
      width: (MediaQuery.of(context).size.width - 30) / 5,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Stack(
            children: [
              Positioned(
                child: Container(
                  margin: EdgeInsets.only(right: 8),
                  child: Image.asset(
                    topImgs[index],
                    width: 26,
                    height: 26,
                    fit: BoxFit.fill,
                  ),
                ),
              ),
              Positioned(
                right: 0,
                child: showBradge
                    ? Container(
                        height: 16,
                        width: 16,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(20)),
                        child: Text(
                          '2',
                          style: TextStyle(color: Colors.white, fontSize: 14),
                        ),
                      )
                    : Container(),
              )
            ],
          ),
          Text(
            topTitle[index],
            style: TextStyle(color: Color(0xFFBEBEBE), fontSize: 14),
          ),
        ],
      ),
    );
  }
}
